<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html >
<html lang="zh-CN">
  <head>
    <title>加载机柜</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	 <link rel="stylesheet" href="${pageContext.servletContext.contextPath}/css/jqueryui.css">
	 <script type="text/javascript" src="${pageContext.servletContext.contextPath}/js/jtopo-min.js"></script>
	 <script type="text/javascript" src="${pageContext.servletContext.contextPath}/js/toolbar.js"></script>
     <script type="text/javascript" src="${pageContext.servletContext.contextPath}/js/jquery.js"></script>
       <script type="text/javascript" src="${pageContext.servletContext.contextPath}/js/jqueryui.js"></script>
 
  </head>
  
  <body>
    		<div >
    		<div id="fwqxx" style="position:absolute;width: 900px;height:650px;top: 10%;left:10%;background-color: white;display: none;">
	    	<div style="padding-left: 2%;background-color: #E7E7E7;">
	   			<img alt="基础信息" src="${pageContext.servletContext.contextPath}/img/jcxx.png">
	   			<img alt="运行信息" src="${pageContext.servletContext.contextPath}/img/yxxx.png">
	   			<img alt="进程管理" src="${pageContext.servletContext.contextPath}/img/jcgl.png">
	   			<img alt="事件与警告" src="${pageContext.servletContext.contextPath}/img/sjyjg.png">
	   			<img src="${pageContext.servletContext.contextPath}/img/gb.png" width="30" height="30" style="float: right;" onclick="shutdownWindow()">
	   		</div >
	   		<img alt="" src="${pageContext.servletContext.contextPath}/img/rjxx.png" style="position: absolute;left: 2%;">
    				<iframe id="frame" width="70%" height="55%" style="margin-left: 2%;margin-top: 1%;"></iframe>
    		
    		<div style="padding-left: 2%;width: 98%;border:1px  solid #EEEEEE;margin-left:2%;width: 68.3%;margin-top: 1%;background-color: #EAEAEA;height: 20%;" >
    			<img alt="" src="${pageContext.servletContext.contextPath}/img/cpxx.png" style="position: absolute;left: 2%;">
    			<div style="padding-top: 5%;">
    			<span style="padding-left: 30%;">总容量：60G &nbsp;已使用：39.88G</span>
    			<div id="progressbar" style="margin-top: 1%;width: 80%;height: 15px; float: left;">
    			</div>
    			<div   style="float: left; padding-left: 3%;">
    			60%
    			</div>
    			</div>
    		</div>
    			<!-- 磁盘 -->
    			<div>
    					<%-- <!-- 盘符 -->
    					<div style="padding-left: 2%;width: 10%;"><img alt="" src="${pageContext.servletContext.contextPath}/img/cp.png"></div>
    					 --%>
    					<table>
    							<tr >
    								<td rowspan="2"><img alt="" src="${pageContext.servletContext.contextPath}/img/cp.png"></td>
    								<td><div style="float: left;width: 80%;height: 8px;margin-top: 4%;" class="cpjdt" ><div class="progress-label"></div></div>60%</td>
    									
    							</tr>
    							<tr>
    								<td>总共60g 已使用39.88g</td>
    							</tr>
    					</table>
    			</div>
    		</div>
    			<canvas id="canvas" width="1400" height="790" style="border: 1px solid rgb(68, 68, 68); cursor: default; background-color: rgb(238, 238, 238);">
    			</canvas>
    		</div>
    		<script>
    			//公用项目名
    			var pageContext='${pageContext.servletContext.contextPath}';
    			
    			//获取到画布对象
    			var canvas=document.getElementById("canvas");
    		    //添加场景
    		    var stage = new JTopo.Stage(canvas);
				var scene = new JTopo.Scene(stage);
				scene.background = './img/bg.jpg';
                //获取到机柜对象字符串
                var cabinet='${cabinet}';
                //获取到机柜对象集合
                  var cabinetArray='';
                if(cabinet!=''){
                cabinetArray=JSON.parse(cabinet);
                }
                //生成页面对象
                for(var i=0;i<cabinetArray.length;i++){
                  var x=parseInt(cabinetArray[i].x);
                  var y=parseInt(cabinetArray[i].y);
                  var w=parseInt(cabinetArray[i].w);
                  var h=parseInt(cabinetArray[i].h);
             
                  var node=new JTopo.Node();
                  node.setBound(x,y,w,h);
                  node.dragable =false;
                  node.setImage(pageContext+'/img/'+cabinetArray[i].src);
                  if(cabinetArray[i].src!='jg.png'){
                   node.zIndex=20;
                   node.inLinks='fwq';
                  }else{
                    node.inLinks='jg';
                  }
                  node.outLink=cabinetArray[i].uuid;
                  scene.add(node);
                }
                //给场景添加点击事件  如果点击源是节点 就弹出展示信息
                scene.click(function(e){
                 if(e.target!=null && e.target instanceof JTopo.Node){
                   if(e.target.inLinks=='fwq'){
                    debugger;
                    var link=e.target.outLink;
                   $("#frame").attr("src","${pageContext.servletContext.contextPath}/"+link+"/tobasics");
                 	$("#fwqxx").css("display","");
                 }}
                });
                function shutdownWindow(){
                  $("#fwqxx").css("display","none");
                }
                
                //进度条
                 $( "#progressbar" ).progressbar({
				      value: 60
				    });
				  var progress= $( "#progressbar" ).find( ".ui-progressbar-value" );
				  progress.css({
			          "background": '#027493'
			        });
			       $(".cpjdt").progressbar({
			          value:60
				     });
				     //定时查询报警设备
			
				   setInterval(queryIsok, 10000);
				   //专门存贮警告设备
				   var warningarray=new Array();
			/**
			查询报警设备
			*/	     
			function queryIsok(){
				$.ajax({
					url:"${pageContext.servletContext.contextPath}/isok",
					type:"post",
					success:function(data){
					var isokObj=JSON.parse(data);
					var nodeArray=scene.getDisplayedNodes();
					warningarray.length=0;
					for(var i=0;i<isokObj.length;i++){
					  for(var j=0;j<nodeArray.length;j++){
					  if(isokObj[i].uid==nodeArray[j].outLink){
					  	warningarray.push(nodeArray[j]);
					  }
					  }
					}
					}
				}
				);
			}	 
			/**
			设备闪烁效果
			*/
			setInterval(function(){
			   for(var i=0;i<warningarray.length;i++){
			      if(warningarray[i].alarm == null){
			       warningarray[i].alarm="警告";
			      }else{
			      warningarray[i].alarm = null;
			      }
			   }
			}, 1000);
        </script>
  </body>
</html>
